const webpack = require('webpack');
// const autoprefixer = require('autoprefixer');
// const precss = require('precss');
const htmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  // context: path.join(__dirname, '/src'),
  entry: {
    // app: './src/app.js',
    index: './src/views/index/index.js',
    about: './src/views/about/about.js'
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'js/[name].bundle.js'
  },
  module: {
    loaders: [{
        test: require.resolve('jquery'),
        loader: 'expose-loader?jQuery!expose-loader?$'
      },
      {
        test: /\.js$/,
        exclude: path.resolve(__dirname, '/node_modules'),
        include: path.resolve(__dirname, '/src'),
        loader: 'babel-loader',
        query: {
          presets: ['latest']
        }
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.tpl$/,
        loader: 'ejs-loader'
      },
      {
        test: /\.css$/,
        // loader: 'style-loader!css-loader?importLoaders=1!postcss-loader'
        // loader: ExtractTextPlugin.extract('style-loader!css-loader?importLoaders=1!postcss-loader')
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?importLoaders=1!postcss-loader'
        })
      },
      {
        test: /\.less$/,
        // loader: 'style-loader!css-loader!postcss-loader!less-loader'
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?importLoaders=1!postcss-loader!less-loader'
        })
      },
      {
        test: /\.scss$/,
        // loader: 'style-loader!css-loader!postcss-loader!sass-loader'
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?importLoaders=1!postcss-loader!sass-loader'
        })
      },
      {
        test: /\.(eot|woff|svg|ttf)$/,
        loader: "file-loader",
        options: {
          outputPath: 'css/font/'
        }
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: 'images/[name].[ext]?[hash:8]'
        }
      },
      // {
      //     //图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求
      //     //如下配置，将小于8192byte的图片转成base64码
      //     test: /\.(png|jpe?g|gif)$/,
      //     loader: 'url-loader?limit=8192&name=images/[name].[ext]?[hash]'
      // }
    ]
  },
  // postcss: [
  //     require('precss'),
  //     require('autoprefixer')
  // ],
  // postcss: function() {
  //     return [require('autoprefixer')];
  // },
  resolve: {
    extensions: ['.js', ".css", 'jsx', '.scss', '.less', '.html', '.tpl'] //自动补全识别后缀
  },
  plugins: [
    new ExtractTextPlugin('css/main.css?[hash:16]'),
    // new htmlWebpackPlugin({
    //   filename: 'app.html',
    //   template: './src/app.html',
    //   inject: 'body',
    //   chunks: ['app']
    // }),
    new htmlWebpackPlugin({
      filename: 'index.html',
      template: './src/views/index/index.tpl',
      inject: 'body',
      chunks: ['index']
    }),
    new htmlWebpackPlugin({
      filename: 'about.html',
      template: './src/views/about/about.tpl',
      inject: 'body',
      chunks: ['about']
    })
  ],
  //使用webpack-dev-server，提高开发效率
  devServer: {
    contentBase: './dist',
    host: 'localhost',
    port: 1388, //默认8080
    inline: true, //可以监控js变化
    hot: true, //热启动
  }

}
